<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
			<el-form-item label="计算日期" prop="calculationDate">
				<el-date-picker v-model="calculationDate" type="monthrange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" value-format="yyyy-MM" format="yyyy-MM">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="所属部门" prop="deptId">
				<treeselect style="width:150px" v-model="queryParams.deptId" :options="deptTreeOptions" :disable-branch-nodes="true" :show-count="true" placeholder="请选择所属部门" />
				<!--<el-input v-model="queryParams.deptId" placeholder="请输入所属部门" clearable size="small" @keyup.enter.native="handleQuery" />-->
			</el-form-item>
			<el-form-item label="用户名称" prop="userId">
				<el-select style="width:150px" v-model="queryParams.userId" clearable placeholder="请选择用户名称">
					<el-option v-for="item in userIdOptions" :key="item.userId" :label="item.userName" :value="item.userId"></el-option>
				</el-select>
				<!--<el-input v-model="queryParams.userId" placeholder="请输入用户" clearable size="small" @keyup.enter.native="handleQuery" />-->
			</el-form-item>
			<el-form-item label="职务职位" prop="postIds">
				<el-select style="width:150px" v-model="queryParams.postIds" clearable placeholder="请选择职务职位">
					<el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId"></el-option>
				</el-select>
				<!--<el-input v-model="queryParams.postIds" placeholder="请输入职务职位" clearable size="small" @keyup.enter.native="handleQuery" />-->
			</el-form-item>
			<el-form-item label="应发工资" prop="maxWagesPayable">
				<el-input-number style="width:150px" v-model="queryParams.minWagesPayable" :max="queryParams.maxWagesPayable" placeholder="请输入应发工资" />-
				<el-input-number style="width:150px" v-model="queryParams.maxWagesPayable" :min="queryParams.minWagesPayable" placeholder="请输入应发工资" />
			</el-form-item>
			</el-form-item>
			<el-form-item>
				<el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['business:personCheck:add']">新增</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="success" icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['business:personCheck:edit']">修改</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['business:personCheck:remove']">删除</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['business:personCheck:export']">导出</el-button>
			</el-col>
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table v-loading="loading" :data="personCheckList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="计算日期" align="center" prop="calculationDate" />
			<el-table-column label="所属部门" align="center" prop="deptId" :formatter="deptIdFormat" />
			<el-table-column label="用户名称" align="center" prop="userName" />
			<el-table-column label="职务职位" align="center" prop="postIds" :formatter="postIdsFormat" />
			<el-table-column label="基本工资" align="center" prop="basePay" />
			<el-table-column label="岗位津贴" align="center" prop="postAllowance" />
			<el-table-column label="绩效奖金" align="center" prop="achievementBonus" />
			<el-table-column label="其他奖金" align="center" prop="otherBonuses" />
			<el-table-column label="应计薪(天)" align="center" prop="accruedSalary" />
			<el-table-column label="实际计薪(天)" align="center" prop="actualSalary" />
			<!--<el-table-column label="产假" align="center" prop="maternityLeave" />
			<el-table-column label="计生假" align="center" prop="familyPlanningLeave" />
			<el-table-column label="病假" align="center" prop="sickLeave" />
			<el-table-column label="事假" align="center" prop="compassionateLeave" />
			<el-table-column label="旷工" align="center" prop="absenteeism" />-->
			<el-table-column label="应发工资" align="center" prop="wagesPayable" />
			<el-table-column label="实发工资" align="center" prop="netSalary" />
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['business:personCheck:edit']">修改</el-button>
					<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['business:personCheck:remove']">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

		<!-- 添加或修改考勤绩效对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
			<el-form :inline="true" ref="form" :model="form" :rules="rules" label-width="120px">
				<el-form-item label="计算日期" prop="userId">
					<el-date-picker style="width:200px" v-model="form.calculationDate" type="month" placeholder="请选择计算日期" value-format="yyyy-MM" format="yyyy-MM"></el-date-picker>
				</el-form-item>
				<el-form-item label="用户" prop="userId">
					<el-select v-model="form.userId" placeholder="请选择用户" @change="userIdChange">
						<el-option v-for="item in userIdOptions" :key="item.userId" :label="item.userName" :value="item.userId"></el-option>
					</el-select>
					<!--<el-input v-model="form.userId" placeholder="请输入用户" />-->
				</el-form-item>
				<el-form-item label="所属部门" prop="deptId">
					<treeselect style="width:200px" disabled v-model="form.deptId" :options="deptTreeOptions" :disable-branch-nodes="true" :show-count="true" placeholder="请选择所属部门" />
					<!--<el-input v-model="form.deptId" placeholder="请输入所属部门" />-->
				</el-form-item>
				<el-form-item label="职务职位" prop="postIds">
					<el-select v-model="form.postIds" disabled multiple clearable placeholder="请选择职务职位">
						<el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId"></el-option>
					</el-select>
					<!--<el-input v-model="form.postIds" placeholder="请输入职务职位" />-->
				</el-form-item>
				<el-form-item label="基本工资" prop="basePay">
					<el-input-number v-model="form.basePay" placeholder="请输入基本工资" />
				</el-form-item>
				<el-form-item label="岗位津贴" prop="postAllowance">
					<el-input-number v-model="form.postAllowance" placeholder="请输入岗位津贴" />
				</el-form-item>
				<el-form-item label="绩效奖金" prop="achievementBonus">
					<el-input-number v-model="form.achievementBonus" placeholder="请输入绩效奖金" />
				</el-form-item>
				<el-form-item label="其他奖金" prop="otherBonuses">
					<el-input-number v-model="form.otherBonuses" placeholder="请输入其他奖金" />
				</el-form-item>
				<el-form-item label="应计薪(天)" prop="accruedSalary">
					<el-input-number v-model="form.accruedSalary" placeholder="请输入应计薪(天)" />
				</el-form-item>
				<el-form-item label="实际计薪(天)" prop="actualSalary">
					<el-input-number v-model="form.actualSalary" placeholder="请输入实际计薪(天)" />
				</el-form-item>
				<el-form-item label="产假" prop="maternityLeave">
					<el-input-number v-model="form.maternityLeave" placeholder="请输入产假" />
				</el-form-item>
				<el-form-item label="计生假" prop="familyPlanningLeave">
					<el-input-number v-model="form.familyPlanningLeave" placeholder="请输入计生假" />
				</el-form-item>
				<el-form-item label="病假" prop="sickLeave">
					<el-input-number v-model="form.sickLeave" placeholder="请输入病假" />
				</el-form-item>
				<el-form-item label="事假" prop="compassionateLeave">
					<el-input-number v-model="form.compassionateLeave" placeholder="请输入事假" />
				</el-form-item>
				<el-form-item label="旷工" prop="absenteeism">
					<el-input-number v-model="form.absenteeism" placeholder="请输入旷工" />
				</el-form-item>
				<el-form-item label="应发工资" prop="wagesPayable">
					<el-input-number v-model="form.wagesPayable" placeholder="请输入应发工资" />
				</el-form-item>
				<el-form-item label="实发工资" prop="netSalary">
					<el-input-number v-model="form.netSalary" placeholder="请输入实发工资" />
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input v-model="form.remark" placeholder="请输入备注" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { listUser, getUser } from "@/api/system/user";
	import { treeselect, listDept } from "@/api/system/dept";
	import { listPost } from "@/api/system/post";
	import Treeselect from "@riophae/vue-treeselect";
	import "@riophae/vue-treeselect/dist/vue-treeselect.css";
	import { validatenull } from '@/utils/validate'
	import { listPersonCheck, getPersonCheck, delPersonCheck, addPersonCheck, updatePersonCheck } from "@/api/business/personCheck";

	export default {
		name: "PersonCheck",
		components: {
			Treeselect
		},
		data() {
			return {
				loading: true, // 遮罩层
				ids: [], // 选中数组
				single: true, // 非单个禁用
				multiple: true, // 非多个禁用
				showSearch: true, // 显示搜索条件
				total: 0, // 总条数
				personCheckList: [], // 考勤绩效表格数据
				userIdOptions: [], // 用户下拉框
				deptTreeOptions: [], //所属部门树状下拉框
				deptOptions: [], //所属部门下拉框
				postOptions: [], // 岗位下拉框
				title: "", // 弹出层标题
				open: false, // 是否显示弹出层
				queryParams: { // 查询参数
					pageNum: 1,
					pageSize: 10,
					deptId: null,
					userId: null,
					postIds: null,
					basePay: null,
					wagesPayable: null,
					netSalary: null,
					remark: null
				},
				form: {}, // 表单参数
				rules: {}, // 表单校验
				calculationDate: []
			};
		},
		created() {
			listUser({
				pageNum: 1,
				pageSize: 1000
			}).then(response => {
				this.userIdOptions = response.rows;
			});
			listDept({
				pageNum: 1,
				pageSize: 1000
			}).then(response => {
				this.deptOptions = response.data;
			});
			listPost({
				pageNum: 1,
				pageSize: 1000
			}).then(response => {
				this.postOptions = response.rows;
			});
			treeselect().then(response => { /** 查询部门下拉树结构 */
				this.deptTreeOptions = response.data;
			});
			this.getList();
		},
		methods: {
			getList() { /** 查询考勤绩效列表 */
				this.loading = true;
				listPersonCheck(this.queryParams).then(response => {
					this.personCheckList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			deptIdFormat(row, column) { // 所属部门下拉框翻译
				return this.getOptionsLabel(this.deptOptions, row.deptId, 'deptId', 'deptName');
			},
			postIdsFormat(row, column) { // 职务职位下拉框翻译
				return this.getOptionsLabel(this.postOptions, row.postIds, 'postId', 'postName');
			},
			cancel() { // 取消按钮
				this.open = false;
				this.reset();
			},
			reset() { // 表单重置
				this.form = {
					id: null,
					delFlag: null,
					createBy: null,
					createTime: null,
					updateBy: null,
					updateTime: null,
					deptId: null,
					userId: null,
					postIds: null,
					basePay: null,
					postAllowance: null,
					achievementBonus: null,
					otherBonuses: null,
					accruedSalary: null,
					actualSalary: null,
					maternityLeave: null,
					familyPlanningLeave: null,
					sickLeave: null,
					compassionateLeave: null,
					absenteeism: null,
					wagesPayable: null,
					netSalary: null,
					remark: null
				};
				this.resetForm("form");
			},
			handleQuery() { /** 搜索按钮操作 */
				if(!validatenull(this.calculationDate)) {
					this.queryParams.calculationStartDate = this.calculationDate[0]
					this.queryParams.calculationEndDate = this.calculationDate[1]
				} else {
					this.queryParams.calculationStartDate = ""
					this.queryParams.calculationStartDate = ""
				}
				this.queryParams.pageNum = 1;
				this.getList();
			},
			resetQuery() { /** 重置按钮操作 */
				this.resetForm("queryForm");
				this.calculationDate = []
				this.handleQuery();
			},
			handleSelectionChange(selection) { // 多选框选中数据
				this.ids = selection.map(item => item.id)
				this.single = selection.length !== 1
				this.multiple = !selection.length
			},
			handleAdd() { /** 新增按钮操作 */
				this.reset();
				this.open = true;
				this.title = "添加考勤绩效";
			},
			handleUpdate(row) { /** 修改按钮操作 */
				this.reset();
				const id = row.id || this.ids
				getPersonCheck(id).then(response => {
					this.form = JSON.parse(JSON.stringify(response.data));
					this.form.postIds = []
					if(!validatenull(response.data.postIds)) {
						let postIds = response.data.postIds.split(",")
						for(let postId of postIds) {
							this.form.postIds.push(postId * 1)
						}
					}
					this.open = true;
					this.title = "修改考勤绩效";
				});
			},
			submitForm() { /** 提交按钮 */
				this.$refs["form"].validate(valid => {
					if(valid) {
						let form = JSON.parse(JSON.stringify(this.form))
						form.postIds = this.form.postIds.join(",")
						if(form.id != null) {
							updatePersonCheck(form).then(response => {
								if(response.code === 200) {
									this.msgSuccess("修改成功");
									this.open = false;
									this.getList();
								}
							});
						} else {
							addPersonCheck(form).then(response => {
								if(response.code === 200) {
									this.msgSuccess("新增成功");
									this.open = false;
									this.getList();
								}
							});
						}
					}
				});
			},
			handleDelete(row) { /** 删除按钮操作 */
				const ids = row.id || this.ids;
				this.$confirm('是否确认删除考勤绩效编号为"' + ids + '"的数据项?', "警告", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(function() {
					return delPersonCheck(ids);
				}).then(() => {
					this.getList();
					this.msgSuccess("删除成功");
				}).catch(function() {});
			},
			handleExport() { /** 导出按钮操作 */
				this.download('business/personCheck/export', {
					...this.queryParams
				}, `考勤绩效.xlsx`)
			},
			userIdChange() {
				this.form.userName = this.getOptionsLabel(this.userIdOptions, this.form.userId, 'userId', 'userName');
				getUser(this.form.userId).then(response => {
					this.form.deptId = response.data.deptId;
					this.form.postIds = response.postIds;
				});
			},
		}
	};
</script>